<template>
    <div class="box2">
      <ul>
        <li v-for="item in data">
          <div class="li-left">
            <img src="/static/lyl/touxiang.png" alt="">
            <p>{{item.str | cap}}</p>
          </div>
          <div class="li-right">
            <span>2016-08-22    20：45:01 </span>
            <img class="d1" v-for="item2 in item.bol" :src="item2?'/static/lyl/xinghong.png':'/static/lyl/xinghui.png'" alt="">
            <p>{{item.str2}}</p>
            <img class="d2" v-for="item3 in item.src2" :src="item3" alt="">
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "Xiang2",
      data(){
        return {
          data:[
            {str:this.$store.state.phone,bol:[true,true,true,true,false],str2:'帮同事买的，很不错，性价比高',src2:['/static/lyl/xiaoming.png','/static/lyl/xiaoming.png','/static/lyl/xiaoming.png','/static/lyl/xiaoming.png']},
            {str:this.$store.state.phone,bol:[true,true,true,true,true],str2:'帮同事买的，很不错，性价比高'},
            {str:this.$store.state.phone,bol:[true,true,true,true,false],str2:'帮同事买的，很不错，性价比高',src2:['/static/lyl/xiaoming.png','/static/lyl/xiaoming.png','/static/lyl/xiaoming.png','/static/lyl/xiaoming.png']},
            {str:this.$store.state.phone,bol:[true,true,true,true,true],str2:'帮同事买的，很不错，性价比高'}
          ]
        }
      },
      filters:{
        cap(value){
          var arr = value.split('');
          var str2 = '';
          for (var i = 0; i < arr.length; i++) {
            if (i>2 && i<7){
              arr[i] = '*';
            }
            str2+=arr[i];
          }
          return str2;
        }
      }
    }
</script>

<style scoped>
   .box2{
     padding: 20px 20px 40px 20px;
   }
   ul li{
     display: flex;
     padding: 20px;
     border-bottom: 1px solid #e9e9e9;
   }
   ul li .li-left{
     text-align: center;
   }
   ul li .li-left img{
     width: 90px;
   }
   ul li .li-left p{
     font-size: 14px;
     margin-top: 10px;
   }
   ul li .li-right{
     margin-left: 20px;
     flex-grow: 1;
   }
   ul li .li-right .d1{
     margin-right: 6px;
   }
   ul li .li-right .d2{
     margin-right: 10px;
   }
   ul li .li-right p{
     font-size: 16px;
     margin: 20px 0;
   }
   ul li .li-right span{
     font-size: 14px;
     color: #999;
     float: right;
   }
   ul li .li-right:after{
     display:block;
     clear:both;
     content:"";
     visibility:hidden;
     height:0;
   }
</style>
